<template>
    <view class="scrollTopCom boxShow flex" :class="display?'slide-in':'slide-out'">
        <button class="shareBtn clearBtn flex" open-type="share">
            <u-icon name="share-square" color="#8A8A8A" size="25"></u-icon>
        </button>
    </view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		props:{
			display: {
				value: Boolean,
				default: false
			}
		},
		methods:{
			
		}
	}
</script>

<style scoped lang="scss">
    .scrollTopCom{
        line-height: 1;
        position: fixed;
        right: -50rpx;
        bottom: 15vh;
        z-index: 100;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        overflow: hidden;
        background-color: #FFFFFF;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        .shareBtn{
            width: 100%;
            height: 100%;
            .iconImg{
                width: 60%;
                height: 60%;
                margin-left: 20%;
            }
        }
    }
    .slide-in {
        animation: slide-in 0.5s forwards;
        -webkit-animation: slide-in 0.5s forwards;
    }
    
    .slide-out {
        animation: slide-out 0.5s forwards;
        -webkit-animation: slide-out 0.5s forwards;
    }
        
    @keyframes slide-in {
        100% { transform: translateX(0%); }
    }
    
    @-webkit-keyframes slide-in {
        100% { -webkit-transform: translateX(0%); }
    }
        
    @keyframes slide-out {
        0% { transform: translateX(0%); }
        100% { transform: translateX(-100%); }
    }
    
    @-webkit-keyframes slide-out {
        0% { -webkit-transform: translateX(0%); }
        100% { -webkit-transform: translateX(-100%); }
    }
</style>
